<!--
 * @Author: gao_m3
 * @Date: 2020-12-01 15:27:51
 * @LastEditors: wei_jt@ecidi.com
 * @LastEditTime: 2021-12-27 21:38:01
 * @Descripttion: 
-->
<template>
  <div v-if="show">
    <fks-dialog
      :visible.sync="show"
      :width="newFileState && showNext ? '480px' : '960px'"
      :before-close="handleClose"
    >
      <div slot="title">
        <i v-if="submitType" class="fks-icon-plus" :style="{ color: theme }" />
        <i v-if="!submitType" class="fks-icon-edit" :style="{ color: theme }" />
        {{ submitType ? LANG.ADD : LANG.EDIT }}
      </div>
      <div v-if="newFileState && showNext">
        <div style="text-align: center">
          <span style="margin-right: 16px">{{ LANG.CHOOSE_CLIENT }}</span>
          <fks-select
            v-model="newType"
            style="width: 82%"
            @visible-change="setClientId"
          >
            <fks-option
              v-for="item in clientId"
              :key="item"
              :value="item"
              :label="clientName[item]"
            />
          </fks-select>
        </div>
        <fks-button
          style="float: right; display: block; margin: 24px 0 0"
          :disabled="isNextStep"
          @click="nextStep"
        >
          {{ LANG.NEXT_STEP }}
          <i class="fks-icon-d-arrow-right" style="margin-left: 4px" />
        </fks-button>
      </div>
      <fks-form
        v-if="!newFileState"
        ref="addFileConfig"
        :model="addFileConfig"
        :rules="submitType ? addFileConfigRules : editFileConfigRules"
        label-width="115px"
      >
        <fks-form-item
          :label="LANG.SERVER_TYPE"
          prop="ossType"
          :span="12"
          lead
          style="display: inline-block"
        >
          <fks-select v-model="addFileConfig.ossType" style="width: 100%">
            <fks-option
              v-for="(item, index) in ossType"
              :key="index"
              :label="item"
              :value="item"
            />
          </fks-select>
        </fks-form-item>
        <fks-form-item
          v-if="addFileConfig.ossType == 'huawei'"
          :span="12"
          prop="location"
        >
          <span slot="label">
            <span class="span-box">
              <span>{{ LANG.LOCATION }}</span>
              <fks-tooltip placement="top-start">
                <div
                  slot="content"
                  style="font-size: 14px; line-height: 20px"
                  class="tips-container"
                >
                  {{ LANG.LOCATION_TIP }}
                </div>
                <i class="fks-icon-question" />
              </fks-tooltip> </span
          ></span>
          <fks-input v-model="addFileConfig.location" maxlength="50" />
        </fks-form-item>
        <fks-form-item :label="LANG.SERVER_ADDRESS" prop="endpoint" :span="12">
          <fks-input v-model="addFileConfig.endpoint" maxlength="50" />
        </fks-form-item>
        <fks-form-item
          :span="12"
          :label="LANG.ACCESS_KEY"
          prop="accessKey"
          align="left"
          header-align="center"
        >
          <span slot="label">
            <span class="span-box">
              <span>{{ LANG.ACCESS_KEY }}</span>
              <fks-tooltip placement="top-start">
                <div
                  slot="content"
                  style="font-size: 14px; line-height: 20px"
                  class="tips-container"
                >
                  {{ LANG.TIP4 }}
                </div>
                <i class="fks-icon-question" />
              </fks-tooltip> </span
          ></span>
          <fks-input
            v-model="addFileConfig.accessKey"
            autocomplete="new-accessKey"
            maxlength="50"
          />
        </fks-form-item>
        <fks-form-item :label="LANG.SECRET_KEY" prop="secretKey" :span="12">
          <span slot="label">
            <span class="span-box">
              <span>{{ LANG.SECRET_KEY }}</span>
              <fks-tooltip placement="top-start">
                <div
                  slot="content"
                  style="font-size: 14px; line-height: 20px"
                  class="tips-container"
                >
                  {{ LANG.TIP5 }}
                </div>
                <i class="fks-icon-question" />
              </fks-tooltip> </span
          ></span>
          <fks-input
            v-model="addFileConfig.secretKey"
            maxlength="50"
            show-password
            autocomplete="new-secretKey"
          />
        </fks-form-item>
        <fks-form-item :label="LANG.BUCKET_NAME" prop="bucketName" :span="12">
          <span slot="label">
            <span class="span-box">
              <span>{{ LANG.BUCKET_NAME }}</span>
              <fks-tooltip placement="top-start">
                <div
                  slot="content"
                  style="font-size: 14px; line-height: 20px"
                  class="tips-container"
                >
                  {{ LANG.TIP6 }}
                </div>
                <i class="fks-icon-question" />
              </fks-tooltip> </span
          ></span>
          <fks-input v-model="addFileConfig.bucketName" maxlength="50" />
        </fks-form-item>
        <fks-form-item>
          <fks-alert
            style="height: auto"
            type="info"
            show-icon
            :closable="false"
          >
            <div slot="title">
              {{ LANG.TIP7 }}
            </div>
          </fks-alert>
        </fks-form-item>
      </fks-form>
      <div class="btns">
        <fks-button
          v-if="!newFileState && !showNext"
          icon="fks-icon-d-arrow-left"
          @click="previosStep"
        >
          {{ LANG.PREVIOUS_STEP }}
        </fks-button>
        <fks-button
          v-if="!newFileState"
          v-permission:1="['file:save']"
          type="primary"
          style="margin-top: 8px"
          icon="fks-icon-check"
          @click="dialogSubmit('addFileConfig')"
        >
          {{ LANG.SAVE }}
        </fks-button>
      </div>
    </fks-dialog>
  </div>
</template>

<script>
import Mix from '@/mixins/module'
import * as types from '@/store/Getter/getterTypes.js'
export default {
  name: 'AddFileConfig',
  props: {
    showDialog: {},
    submitType: {}, //true新增
    config: {},
    fileState: {}, //false显示选择应用
    allClientId: {},
    client: {},
    clientName: {}
  },
  data() {
    return {
      isSetForm: false,
      isNextStep: true,
      showNext: false,
      show: false,
      newType: '',
      newFileState: true,
      clientId: [],
      ossType: ['minio', 'ali', 'huawei'],
      addFileConfig: {
        endpoint: '',
        accessKey: '',
        secretKey: '',
        bucketName: '',
        state: true
      }
    }
  },
  computed: {
    classObject() {
      return {
        tips: this.addFileConfig.ossType == 'huawei' && this.$lang == 'zh-CN',
        tip: this.addFileConfig.ossType != 'huawei' && this.$lang == 'zh-CN',
        tips_en: this.addFileConfig.ossType == 'huawei' && this.$lang == 'en',
        tip_en: this.addFileConfig.ossType != 'huawei' && this.$lang == 'en'
      }
    },
    theme() {
      return this.$store.getters[types.THEME]
    },
    addFileConfigRules() {
      const addFileConfigRules = {
        endpoint: [
          { required: true, trigger: 'blur', message: this.LANG.ENDPOINT }
        ],
        accessKey: [
          { required: true, trigger: 'blur', message: this.LANG.MSG_ASKEY }
        ],
        secretKey: [
          { required: true, trigger: 'blur', message: this.LANG.MSG_SCKEY }
        ],
        bucketName: [
          { required: true, trigger: 'blur', message: this.LANG.MSG_BUCKET }
        ],
        location: [
          { required: true, trigger: 'blur', message: this.LANG.MSG_LOCATION }
        ],
        ossType: [{ required: true, message: this.LANG.MSG_OSS }]
      }
      return addFileConfigRules
    },
    editFileConfigRules() {
      const editFileConfigRules = {
        endpoint: [
          { required: true, trigger: 'blur', message: this.LANG.ENDPOINT }
        ],
        accessKey: [
          { required: true, trigger: 'blur', message: this.LANG.MSG_ASKEY }
        ],

        bucketName: [
          { required: true, trigger: 'blur', message: this.LANG.MSG_BUCKET }
        ],
        location: [
          { required: true, trigger: 'blur', message: this.LANG.MSG_LOCATION }
        ],
        ossType: [{ required: true, message: this.LANG.MSG_OSS }]
      }
      return editFileConfigRules
    }
  },
  watch: {
    showDialog(val) {
      if (val) {
        this.isSetForm = false
        this.showNext = true
        this.show = true
        if (this.config.ossType == '') delete this.config.ossType
        this.addFileConfig = Object.assign({}, this.config) //避免ossType赋值为''带来的校验错误
        this.newFileState = this.fileState
        if (this.newFileState) this.showNext = true
        else this.isSetForm = true
      }
    },
    newType(val) {
      if (val) {
        this.isNextStep = false
      }
      if (!val) this.isNextStep = true
    }
  },
  mounted() {},
  methods: {
    //新增应用下文件服务器 上一步
    previosStep() {
      this.showNext = true
      this.newFileState = true
    },
    //新增应用下文件服务器 下一步
    nextStep() {
      this.showNext = false
      this.newFileState = false
      this.isSetForm = true
    },
    dialogSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var a = new RegExp(
            /^((?!(^\d+\.\d+\.\d+\.\d+$))[\da-z][\da-z\-\.]{1,61}[\da-z])$/
          )
          if (a.test(this.addFileConfig.bucketName)) {
            this.$emit('submit', this.addFileConfig, this.newType)
            this.handleClose()
          } else {
            this.$message.error(this.LANG.BUCKET_WARN)
          }
        }
      })
    },
    setClientId(val) {
      if (val) {
        this.newType = ''
        this.clientId = [].concat(this.allClientId)
        let client = JSON.parse(JSON.stringify(this.client))
        for (var a in client) {
          let index = this.clientId.indexOf(a)
          if (index > -1) {
            this.clientId.splice(index, 1)
          }
        }
      }
    },
    handleClose() {
      if (this.isSetForm) this.$refs['addFileConfig']?.clearValidate()
      this.newType = ''
      this.show = false
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
.btns {
  float: right;
}

.tips ::v-deep .fks-form-item__content {
  margin-left: 571px !important;
}

.tip ::v-deep .fks-form-item__content {
  width: 325px;
  margin-left: 117px;
}

.tips_en ::v-deep .fks-form-item__content {
  margin-left: 460px;
}

.tip_en ::v-deep .fks-form-item__content {
  width: 436px;
  margin-left: 4px;
}
</style>